<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
	
	<script>
		var data=[{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"children":[{
		"id":2,
		"name":"Program Files",
		"size":"120 MB",
		"date":"03/20/2010",
		"children":[{
			"id":21,
			"name":"Java",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":211,
				"name":"java.exe",
				"size":"142 KB",
				"date":"01/13/2010"
			},{
				"id":212,
				"name":"jawt.dll",
				"size":"5 KB",
				"date":"01/13/2010"
			}]
		},{
			"id":22,
			"name":"MySQL",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":221,
				"name":"my.ini",
				"size":"10 KB",
				"date":"02/26/2009"
			},{
				"id":222,
				"name":"my-huge.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			},{
				"id":223,
				"name":"my-large.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			}]
		}]
	},{
		"id":3,
		"name":"eclipse",
		"size":"",
		"date":"01/20/2010",
		"children":[{
			"id":31,
			"name":"eclipse.exe",
			"size":"56 KB",
			"date":"05/19/2009"
		},{
			"id":32,
			"name":"eclipse.ini",
			"size":"1 KB",
			"date":"04/20/2010"
		},{
			"id":33,
			"name":"notice.html",
			"size":"7 KB",
			"date":"03/17/2005"
		}]
	}]
}];
	</script>
	
</head>
<body>
	<div>
		<input id="combotreegrid1" class="easyui-combotreegrid" data-options="
			data:data,
			idField:'id',
			textField:'name',
			treeField:'name',
			limitToGrid:true,
			width:300,
			panelWidth:500,
			label:'请选择:',
			labelPosition:'left',
			value:[ 32 ],
			rownumbers:true,
			multiple:true,
			singleSelect:false,
			delay:50,
			editable:false,
			readonly:false,
			columns:[[
				{ field:'',checkbox:true,align:'center' },
				{ field:'id',hidden:true,align:'center' },
				{ field:'name',title:'名称',width:150,align:'left' },
				{ field:'date',title:'时间',width:90,align:'center' },
				{ field:'size',title:'大小',align:'center' }
			]]
			" />
	</div>
	<div>方法继承combo组件</div>
<div class="easyui-linkbutton" onclick="let options=$('#combotreegrid2').combotreegrid('options'); showTip(JSON.stringify(options));">options</div>
<div class="easyui-linkbutton" onclick="let value=$('#combotreegrid2').combotreegrid('grid').treegrid('getSelected'); showTip(value);">grid</div>
<div class="easyui-linkbutton" onclick="let value=$('#combotreegrid2').combotreegrid('setValue',003);">setValue</div>
<div class="easyui-linkbutton" onclick="$('#combotreegrid2').combotreegrid('clear');">clear</div>
	
	
	
	
	<input id="combotreegrid2" class="easyui-combotreegrid" />
	<script>
		$(()=>{
			$("#combotreegrid2").combotreegrid({
				data:{total:500,rows: data.concat(data) },
				pagination:true
				,pageList:[5,10,20,30]
				
				,idField:'id',
			textField:'name',
			treeField:'name',
			limitToGrid:true,
			width:300,
			panelWidth:500,
			label:'请选择:',
			labelPosition:'left',
			value:[ 32 ],
			rownumbers:true,
			multiple:true,
			singleSelect:false,
			delay:2000,
			editable:false,
			readonly:false,
			columns:[[
				{ field:'',checkbox:true,align:'center' },
				{ field:'id',hidden:true,align:'center' },
				{ field:'name',title:'名称',width:150,align:'left' },
				{ field:'date',title:'时间',width:90,align:'center' },
				{ field:'size',title:'大小',align:'center' }
			]]
				
				/* 事件继承自 combo 和 treegrid */
				,onShowPanel:function(){
					showTip('展开下拉框');
				}
				,onHidePanel:function(){
					showTip('收起下拉框');
				}
				,onChange:function(newValue, oldValue){
					showTip('新值:'+newValue+' 旧值:'+oldValue);
				}
			});
		});
	</script>
	
	
	
</body>
</html>